<!DOCTYPE html>
<html>
<head>
	<title>任务六：通过HTML及CSS模拟报纸排版</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="test6.css">
</head>
<body>
	<div class="container">
		<div class="header">
			<div class="left">
				<a href="https://www.baidu.com">
					ife.baidu.com
				</a>
			</div>
			<div class="right">
				<span>2016.03</span>
			</div>
		</div>
		<div class="bodyer">
			<div class="top">
				<div class="topleft">
					<img src="banner.jpg" alt="">
					<div class="left"></div>
					<div class="right"></div>
				</div>
				<div class="topright">
					<div class="headqu">
						<label class="big">
							<span style="font-size: 24px;">A</span>BOUT
						</label>
						<br/>
						<label style="margin-top: 40px;" class="big">
							<span style="font-size: 24px;">T</span>ECHNOLOGE
						</label>
						<br/>
						
					</div>
					<div class="middlequ">
						<p class="about">
							About technologe about technologe about technologe
						</p>
						<!-- <br/> -->
						<p class="sign700">
							700
						</p>
					</div>
					<div class="bottomqu">
						<div class="left">3.2</div>
						<div class="right">
							<p class="csstop">css</p>
				
							<p class="cssbot">csscsscscsscs</p>
						</div>
					</div>
				</div>
			</div>
			<div class="middle">
				<div class="mainleft">
					<h3>What</h3>
					<p>
						前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
						端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
					</p>
				</div>
				<div class="maincenter">
					<h3>When</h3>
					<p>
						前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端端
					</p>
				</div>
				<div class="mainright">
					<h3>How</h3>
					<p>
						端前端前端前端前
						<br/>
						端前端前端前前端前端
						<br/>
						前端前端前端
					</p>
					<ul>
						<li>What ------ 40%</li>
						<li>What ------ 30%</li>
						<li>What ------ 30%</li>
					</ul>
				</div>
			</div>
			<div class="bottom">
				<div class="bottomleft">
					<div class="thistop">
						<div class="top1">
							<span class="the">THE</span>
							<span class="tech">TECHNOLOGE</span>
						</div>
						<div class="top2">
							<span class="off">OF&nbsp;&nbsp;FRONT</span>
						</div>
						<div class="top3">
							<span class="qian">前端技术领域</span>
						</div>
					</div>
					<div class="thisbottom">
						<p>
							<span>前</span>
							端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前
							前端前端前端前端前端前
							<img src="laptop.jpg" alt="laptop">端前端前端前端前端前端前端前端前端
							端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
							前端前端前端前端前端前端前端前端前端前端前端前端前端前端
							
						</p>				
						<p style="text-indent: 2em">
							前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
						</p>
						<p style="text-indent: 2em">
							前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
						</p>		
					</div>
				</div>
				<div class="bottomright">
					<div class="right1">
						<img src="tap.jpg" alt="tap">
						<div class="bottomsign">
							<div class="left"></div>
							<div class="right">
								<span class="thisleft">前端技术</span>
								<span class="thisright">前端技术前端技术</span>
							</div>
						</div>
					</div>
					<div class="right2">
						<div class="thistop">
							<ul>
								<li>
									<span class="leftfont">		
										前端前端前端前端前端前端.......................
									</span>
									<span class="rightfont">前端</span>
								</li>
								<li>
									<span class="leftfont">	
										前端前端前端前端..............................
									</span>
									<span class="rightfont">前端前</span>
								</li>
								<li>
									<span class="leftfont">
										前端前端前端前端前端前端前端...................
									</span>
									<span class="rightfont">前端</span>
								</li>
							</ul>
						</div>
						<div class="thisbottom">
							<div class="thisleft">
								<div class="left0">
									<span>0</span>
								</div>
								<div class="rightone">
									<span class="topspan">
										ONE TWO
									</span>
									<br/>
									<span class="middlespan">
										THREE FOUR FIVE
									</span>
									<br/>
									<p class="bottomspan">
										hello world hello world hello world
									</p>
								</div>
							</div>
							<div class="thisright">
								<span class="topspan">“</span>
								<span class="middlespan">
									hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello
								</span>
								<span class="bottomspan">”</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="footer">
			<label>ife.baidu.com</label>
			
		</div>

	</div>
</body>
</html>
